<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>
            阳光成单系统
        </title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="format-detection" content="telephone=no">
        <link rel="stylesheet" href="./css/x-admin.css" media="all">
        <link rel="stylesheet" href="./lib/bootstrap/css/bootstrap.css" media="all">
        <!--<link rel="stylesheet" href="./lib/bootstrap/js/bootstrap.min.js" media="all">-->
    </head>
    <body style="height:1150px;">
    <div class="x-nav">

        <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"  href="javascript:location.replace(location.href);" title="刷新"><i class="layui-icon" style="line-height:30px">ဂ</i></a>
    </div>
    <div class="container-fluid ygyd-wrapper">

        <!--相关统计-->
        <div class="row">

        <div class="col-sm-6">
         <section class="panel">
                    <div class="panel-heading">文章类型</div>
                    <div class="panel-body">
                        <div class="echarts" id="area" style="height:300px; height:350px"></div>
                    </div>
                </section>
        </div>
        <div class="col-sm-6">
         <section class="panel">
                    <div class="panel-heading">数据统计</div>
                    <div class="panel-body">

                        <div class="echarts" id="map" style="height:300px; height:350px"></div>
                    </div>
                </section>
        </div>
        <div class="col-sm-6">
         <section class="panel">
                    
                    <div class="panel-body">
                        <div class="echarts" id="years" style="height:300px; height:350px"></div>
                    </div>
                </section>
        </div>
        <div class="col-sm-6">
         <section class="panel">
                    
                    <div class="panel-body">
                        <div class="echarts" id="product" style="height:300px; height:350px"></div>
                    </div>
                </section>
        </div>

        </div>
    
    </div>
       
        <script src="./lib/layui/layui.js" charset="utf-8"></script>
        <script src="./js/echarts.min.js"></script>
        <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
        	title: {
                text: '产品订单比例',

            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data:['车贷','房贷','信用贷']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['周一','周二','周三','周四','周五','周六','周日']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name:'车贷',
                    type:'line',
                    stack: '总量',
                    data:[120, 132, 101, 134, 90, 230, 210]
                },
                {
                    name:'房贷',
                    type:'line',
                    stack: '总量',
                    data:[220, 182, 191, 234, 290, 330, 310]
                },
                {
                    name:'信用贷',
                    type:'line',
                    stack: '总量',
                    data:[150, 232, 201, 154, 190, 330, 410]
                }
            ]
        };


        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
    <script type="text/javascript">
        // 指定图表的配置项和数据
       var myChart = echarts.init(document.getElementById('area'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '分类文章数据统计',
                subtext: '文章总数',
                x: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            itemStyle: {

                normal: {

                    //好，这里就是重头戏了，定义一个list，然后根据所以取得不同的值，这样就实现了，

                    color: function(params) {

                        // build a color map as your need.

                        var colorList = [

                            '#60c0dd','#B5C334','#FCCE10','#E87C25','#27727B',

                            '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',

                            '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'

                        ];

                        return colorList[params.dataIndex]

                    },

                    //以下为是否显示，显示位置和显示格式的设置了

                    label: {

                        show: true,

                        position: 'top',

//                             formatter: '{c}'

                        formatter: '{b}\n{c}'

                    }

                }

            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: ['PHP', 'JavaScript', 'MySQL', 'jQuery', 'CSS', 'MUI', ]
            },
            series: [{

                name: '文章总数',
                type: 'pie',
                radius: '55%',
                center: ['50%', '60%'],
                data: [

                    {value: 19, name: 'PHP'} ,
                    {value: 5, name: 'JavaScript'} ,
                    {value: 0, name: 'MySQL'} ,
                    {value: 0, name: 'jQuery'} ,
                    {value: 0, name: 'CSS'} ,
                    {value: 2, name: 'MUI'} ,
                    /*{ value: 4310, name: 'MySQL' },
        { value: 2310, name: 'JavaScript' },
        { value: 3310, name: 'JQuery' },
        { value: 9310, name: 'CSS' }*/
                ],
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('years'));

        // 指定图表的配置项和数据
        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '文章年度统计',
                subtext: '纯属虚构',
                x: 'center'
            },
            //color: ['#3398DB'],

            tooltip: {
                trigger: 'axis',
                axisPointer: { // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [{
                type: 'category',
                data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
                axisTick: {
                    alignWithLabel: true
                }
            }],
            yAxis: [{
                type: 'value'
            }],
            series: [{
                name: '发布量',
                itemStyle: {

                    normal: {

                        //好，这里就是重头戏了，定义一个list，然后根据所以取得不同的值，这样就实现了，

                        color: function(params) {

                            // build a color map as your need.

                            var colorList = [

                                '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',

                                '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',

                                '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'

                            ];

                            return colorList[params.dataIndex]

                        },

                        //以下为是否显示，显示位置和显示格式的设置了

                        label: {

                            show: true,

                            position: 'top',

//                             formatter: '{c}'

                            formatter: '{c}\n{b}'

                        }

                    }

                },
                type: 'bar',
                barWidth: '60%',
                data: [10, 8, 12, 14, 10, 6, 8, 7, 15, 9, 5, 6]
            }]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('product'));

        // 指定图表的配置项和数据
        option = {
            title : {
                text: '南丁格尔玫瑰图',
                subtext: '纯属虚构',
                x:'center'
            },
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                x : 'center',
                y : 'bottom',
                //data:[{volist name="cate" id="ca"}'{$ca.title}', {/volist},],

            },
            toolbox: {
                show : true,
                feature : {
                    mark : {show: true},
                    dataView : {show: true, readOnly: false},
                    magicType : {
                        show: true,
                        type: ['pie', 'funnel']
                    },
                    restore : {show: true},
                    saveAsImage : {show: true}
                }
            },
            calculable : true,
            itemStyle: {

                normal: {

                    //好，这里就是重头戏了，定义一个list，然后根据所以取得不同的值，这样就实现了，

                    color: function(params) {

                        // build a color map as your need.

                        var colorList = [
                            '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
                            '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
                            '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'

                        ];

                        return colorList[params.dataIndex]

                    },

                    //以下为是否显示，显示位置和显示格式的设置了

                    label: {

                        show: true,

                        position: 'top',

//                             formatter: '{c}'

                        formatter: '{b}\n{c}'

                    }

                }

            },
            series : [
                {
                    name:'半径模式',
                    type:'pie',
                    radius : [20, 110],
                    center : ['25%', '50%'],
                    roseType : 'radius',

                    label: {
                        normal: {
                            show: false
                        },
                        emphasis: {
                            show: true
                        }
                    },
                    lableLine: {
                        normal: {
                            show: false
                        },
                        emphasis: {
                            show: true
                        }
                    },
                    data:[
                        {value:10, name:'rose1'},
                        {value:5, name:'rose2'},
                        {value:15, name:'rose3'},
                        {value:25, name:'rose4'},
                        {value:20, name:'rose5'},
                        {value:35, name:'rose6'},
                        {value:30, name:'rose7'},
                        {value:40, name:'rose8'}
                    ]
                },
                {
                    name:'面积模式',
                    type:'pie',
                    radius : [30, 110],
                    center : ['75%', '50%'],
                    roseType : 'area',
                    data:[


                        {value:5, name:'rose2'},
                        {value:15, name:'rose3'},
                        {value:25, name:'rose4'},
                        {value:20, name:'rose5'},
                        {value:35, name:'rose6'},
                        {value:30, name:'rose7'},
                        {value:40, name:'rose8'}
                    ]
                }
            ]
        };


        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>

    <script>
    	// 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('map'));
    	
//app.title = '多 X 轴示例';

		var colors = ['#5793f3', '#d14a61', '#675bba'];
		
		
		option = {
		    color: colors,
		 	title : {
		        text: '文章总数',
		        subtext: '纯属虚构'
		    },
		    tooltip: {
		        trigger: 'none',
		        axisPointer: {
		            type: 'cross'
		        }
		    },
		    legend: {
		        data:['2015 总数', '2016 总数']
		    },
		    grid: {
		        top: 70,
		        bottom: 50
		    },
		    xAxis: [
		        {
		            type: 'category',
		            axisTick: {
		                alignWithLabel: true
		            },
		            axisLine: {
		                onZero: false,
		                lineStyle: {
		                    color: colors[1]
		                }
		            },
		            axisPointer: {
		                label: {
		                    formatter: function (params) {
		                        return '总数  ' + params.value
		                            + (params.seriesData.length ? '：' + params.seriesData[0].data : '');
		                    }
		                }
		            },
		            data: ["2016-1", "2016-2", "2016-3", "2016-4", "2016-5", "2016-6", "2016-7", "2016-8", "2016-9", "2016-10", "2016-11", "2016-12"]
		        },
		        {
		            type: 'category',
		            axisTick: {
		                alignWithLabel: true
		            },
		            axisLine: {
		                onZero: false,
		                lineStyle: {
		                    color: colors[0]
		                }
		            },
		            axisPointer: {
		                label: {
		                    formatter: function (params) {
		                        return '总数  ' + params.value
		                            + (params.seriesData.length ? '：' + params.seriesData[0].data : '');
		                    }
		                }
		            },
		            data: ["2015-1", "2015-2", "2015-3", "2015-4", "2015-5", "2015-6", "2015-7", "2015-8", "2015-9", "2015-10", "2015-11", "2015-12"]
		        }
		    ],
		    yAxis: [
		        {
		            type: 'value'
		        }
		    ],
		    series: [
		        {
		            name:'2015 总数',
		            type:'line',
		            xAxisIndex: 1,
		            smooth: true,
		            data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
		        },
		        {
		            name:'2016 总数',
		            type:'line',
		            smooth: true,
		            data: [3.9, 5.9, 11.1, 18.7, 48.3, 69.2, 231.6, 46.6, 55.4, 18.4, 10.3, 0.7]
		        }
		    ]
		};

		myChart.setOption(option);
    </script>
        
    </body>
</html>